<template>
  <section class="account_bind-wrapper">
    <el-form size="mini" label-position="left" label-width="50px">
      <el-form-item v-for="(temp,index) in bindInfo" :key="index" :label="temp.label">
        <div v-if="temp.edit" class="edit-wrapper">
          <el-input v-model="formData[temp.type]" class="new_value-input" />
          <el-input
            v-if="temp.verifyCodeCD>0"
            v-model="temp.verifyCode"
            class="verify_code-input"
            placeholder="请输入验证码"
          />
          <el-button v-if="temp.verifyCode.length===6" type="success" @click="submit(temp)">确定</el-button>
          <el-button
            v-else
            type="primary"
            :disabled="temp.verifyCodeCD>0"
            @click="getVerifyCodeHandler(temp)"
          >
            <span>获取验证码</span>
            <span v-if="temp.verifyCodeCD>0">({{ temp.verifyCodeCD }})</span>
          </el-button>
          <el-button type="danger" @click="cencelHandler(temp)">取消</el-button>
        </div>
        <template v-else>
          <div class="text-wrapper">{{ formData[temp.type] || '未绑定' }}</div>
          <el-button type="text" @click="editBeginHandler(temp)">更换</el-button>
        </template>
      </el-form-item>
    </el-form>
  </section>
</template>

<script>
import { getVerifyCode, verifySignCanUse } from "@/api/utils";
import { updateAccountBind } from "@/api/user";

export default {
    data() {
        return {
            formData: {},
            bindInfo: [
                {
                    label: "手机",
                    type: "phone",
                    edit: false,
                    verifyCode: "",
                    rawVal: "",
                    verifyCodeCD: 0,
                },
                {
                    label: "邮箱",
                    type: "email",
                    edit: false,
                    verifyCode: "",
                    rawVal: "",
                    verifyCodeCD: 0,
                },
            ],
        };
    },
    async mounted() {
        await this.getUserInfo();
    },
    methods: {
        async getUserInfo() {
            const userInfo = await this.$store.dispatch("user/getInfo");
            this.formData = userInfo;
        },
        async editBeginHandler(temp) {
            temp.edit = true;
            temp.rawVal = this.formData[temp.type];
        },
        /** @获取验证码按钮点击处理 */
        async getVerifyCodeHandler(temp) {
            const sendData = this.formatSendDataForVerifyCode(temp);
            if (!(await this.verifySignCanUse(sendData))) {
                return;
            }
            const data = await this.getVerifyCode(sendData);
            this.comVerifyCodeCD(temp, data);
        },
        formatSendDataForVerifyCode(temp) {
            const { type } = temp;
            const sign = this.formData[type];
            const sendData = { type };
            sendData[type] = sign;
            return sendData;
        },
        async verifySignCanUse(sendData) {
            const { code, message } = await verifySignCanUse(sendData);
            const isSuccess = code === 200;
            if (!isSuccess) {
                this.$message.error(message);
            }
            return isSuccess;
        },
        async getVerifyCode(sendData) {
            const { code, message, data } = await getVerifyCode(sendData);
            const isSuccess = code === 200;
            this.$message({
                type: isSuccess ? "success" : "error",
                message,
            });
            return data;
        },
        comVerifyCodeCD(temp, data) {
            const expiresIn = data.expiresIn || 0;
            temp.verifyCodeCD = 0;
            const timer = setInterval(() => {
                if (expiresIn < Date.now()) {
                    clearInterval(timer);
                    temp.verifyCodeCD = 0;
                    temp.verifyCode = "";
                }
                const diff = (expiresIn - Date.now()) / 1000;
                temp.verifyCodeCD = Math.ceil(diff);
            }, 1000);
        },
        /** @提交 */
        async submit(temp) {
            const { verifyCode, type } = temp;
            const sign = this.formData[type];
            const { code, message } = await updateAccountBind({
                verifyCode,
                sign,
                type,
            });
            const isSuccess = code === 200;
            this.$message({
                type: isSuccess ? "success" : "error",
                message,
            });
            if (isSuccess) {
                // 修改成功后重设他的初始值
                temp.edit = false;
                temp.rawVal = sign;
            }
        },
        /** @取消修改 */
        cencelHandler(temp) {
            temp.edit = false;
            this.formData[temp.type] = temp.rawVal;
        },
    },
};
</script>

<style lang="scss" scoped>
@import "~@/styles/variables.scss";

.account_bind-wrapper {
  width: $baseWidth;
  margin: auto;
  .new_value-input {
    width: 200px;
    margin-right: 10px;
  }
  .edit-wrapper {
    display: flex;
    .verify_code-input {
      width: 110px;
      margin-right: 10px;
    }
  }
  .text-wrapper{
    height: 29px;
    display: inline-block;
  }
}
</style>
